<template>
  <div class="accessoryModal">
    <el-dialog :title="text_Text" :visible.sync="fileToggle" :before-close="userClose" width="70%" top="6vh">
      <div class="fileBox">
        <div class="fileBoxLift">
          <el-table ref="multipleTable" :data="fileList" stripe>
            <el-table-column prop="name" label="附件名称" show-overflow-tooltip width="210"></el-table-column>
            <el-table-column label="操作" width="80">
              <template slot-scope="scope">
                <a class="a1" :href="scope.row.href">
                  <el-button type="primary" size="mini">下载</el-button>
                </a>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="fileBoxRight">
          <el-upload class="upload-demo" :disabled="!upShowhide" :data="objData" :action="uploadUrl" multiple :on-success="handleSuccess" :before-upload="handleError" :file-list="fileList" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="delFile">
            <i class="el-icon-upload"></i>
            <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
          </el-upload>
        </div>
      </div>
      <span slot="footer" class="dialog-footer" v-show="upShowhide">
        <el-button type="primary" size="small" @click="btn_save">确定</el-button>
      </span>
    </el-dialog>
    <div class="viewerBox" v-show="dialogVisible">
      <viewer :images="fileList2">
        <img v-for="(item, index) in fileList2" :src="item.url" :key="index" class="fileBoxRight_img" />
      </viewer>
    </div>
  </div>
</template>
<script>
export default {
  name: "accessoryModel",
  data() {
    return {
      fileList: [],
      fileList2: [],
      fileToggle: false,
      text_Text:
        "附件(文件格式：ppt、ptx、doc、docx、xls、xlsx、pdf、png、jpg、jpeg、gif、bmp、zip、rar、7z、txt)",
      newSrcstr: "",
      dialogImageUrl: "",
      dialogVisible: false,
      baseUrl: process.env.VUE_APP_BASE_URL,
      uploadUrl: process.env.VUE_APP_BASE_URL + "/file/ajax/upload_file",
      imagesSrc: "",
      objData: {}
    };
  },
  props: {
    textTitFile: String,
    newModal: Boolean,
    upShowhide: Boolean,
    fileSrc: {
      default: () => { }
    }
  },
  watch: {
    newModal(val) {
      this.fileToggle = val;
    },
    textTitFile(val) {
      // this.text_Text = val;
    },
    fileSrc: {
      handler: function (val) {
        this.fileList = [];
        this.dialogImageUrl = "";
        if (val.fileStr) {
          let srcArr = val.fileStr.split(",");
          srcArr.map((i) => {
            let fileName = i.split("_");
            this.fileList.push({
              name: fileName[1],
              href: this.baseUrl + "/file/downloadFile?filePath=" + i,
              src: i,
              url: this.baseUrl + "/file/downloadFile?filePath=" + i
            });
          });
          this.fileList2 = this.fileList;
        }
      },
      deep: true
    }
  },

  methods: {
    btn_save() {
      this.fileToggle = false;
      this.newSrcstr = "";
      if (this.fileList.length) {
        this.fileList.map((i) => {
          this.newSrcstr += i.src + ",";
        });
      } else {
        this.newSrcstr = "";
      }
      if (this.newSrcstr) {
        this.newSrcstr = this.newSrcstr.substring(0, this.newSrcstr.length - 1);
      }
      this.$emit("chileFile", this.newSrcstr);
      this.$emit("colseTog", this.fileToggle);
      // this.$emit("fileStr", this.fileToggle);
    },
    userClose() {
      this.fileToggle = false;
      this.$emit("colseTog", this.fileToggle);
    },
    // 查看
    handlePictureCardPreview(file) {
      // this.dialogImageUrl = file.url;
      let uid = file.uid;
      let _index = 0;
      this.fileList.map((item, index) => {
        // eslint-disable-next-line eqeqeq
        if (item.uid == uid) {
          _index = index;
        }
      });
      this.dialogVisible = false;
      this.$nextTick(() => {
        if (document.all) {
          let fileBoxRightImg = window.document.getElementsByClassName(
            "fileBoxRight_img"
          );
          fileBoxRightImg[_index].click();
        } else {
          // 其它浏览器
          let e = window.document.createEvent("MouseEvents");
          e.initEvent("click", true, true);
          let fileBoxRightImg = window.document.getElementsByClassName(
            "fileBoxRight_img"
          );
          fileBoxRightImg[_index].dispatchEvent(e);
        }
      });

      // this.imagesSrc = file.url;
      // this.images = [];
      // this.images.push(file.url);
      // const viewer = this.$el.querySelector(".images").$viewer;
      // viewer.show();
    },
    // 删除
    delFile(file, fileList) {
      this.fileList.remove(file);
      this.dialogImageUrl = "";
    },
    // 上传成功回调
    handleSuccess(res, file, fileList) {
      if (res.success) {
        // this.fjArr.push(res.msg);
        let fileName = res.data.split("_");
        this.fileList.push({
          name: fileName[1],
          href: this.baseUrl + "/file/downloadFile?filePath=" + res.data,
          src: res.data,
          url: this.baseUrl + "/file/downloadFile?filePath=" + res.data
        });
        this.fileList2 = this.fileList;
      } else {
        fileList.splice(fileList.length - 1, 1);
        this.$message({
          type: "warning",
          message: res.msg
        });
      }
    },
    handleError(file) {
      let reg = new RegExp("[~#^$@%&!?%*]", "g");
      const isTszf = file.name.match(reg);
      if (file.name.match(reg)) {
        this.$message.error("文件名称存在特殊字符~");
      }
      const isLt5M = file.size / 1024 / 1024 < 100;
      if (!isLt5M) {
        this.$message.error("上传附件大小不能超过 100MB!");
      }
      return isLt5M && !isTszf;
    }
  },
  mounted() {
    // eslint-disable-next-line no-extend-native
    Array.prototype.indexOf = function (val) {
      for (var i = 0; i < this.length; i++) {
        // eslint-disable-next-line eqeqeq
        if (this[i] == val) return i;
      }
      return -1;
    };
    // eslint-disable-next-line no-extend-native
    Array.prototype.remove = function (val) {
      var index = this.indexOf(val);
      if (index > -1) {
        this.splice(index, 1);
      }
    };
  }
};
</script>
<style lang="scss">
.accessoryModal {
  .el-dialog__header {
    height: 60px;
    border-bottom: 1px solid #ccc;
    background: #307ecc;
    .el-dialog__title {
      font-size: 1vw;
      color: #fff;
    }
  }
  .el-dialog__body {
    padding: 10px 10px;
    .fileBox {
      display: flex;
      width: 100%;
      height: 100%;

      .fileBoxLift {
        width: 300px;
        border-right: 1px solid #ccc;
        overflow-y: auto;
        height: 60vh;
        .a1 {
          color: #0011ff;
          cursor: pointer;
        }
      }
      .fileBoxRight {
        flex: 1;
        height: 58vh;
        padding: 10px;
        box-sizing: border-box;
        overflow: auto;
      }
    }
  }
  .el-dialog {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  }
  .el-upload-dragger {
    width: 150px;
    height: 150px;
  }
  .el-dialog__footer {
    border-top: 1px solid #ccc;
    height: 60px;
  }
  .viewerBox {
    height: 70vh;
    width: 70vw;
    overflow: hidden;
    .fileBoxRight_img {
      float: left;
      width: 148px !important;
      height: 148px !important;
      margin: 0 8px 8px 0 !important;
    }
  }
}
</style>
